<template>
	<view class="cunten">
		<view class="lodin" @click="loadimg">
			<image :src="pic" mode="" v-if="pic !== ''" class="photo"></image>
			<u-icon name="camera-fill" color="#fff" size="60"></u-icon>
		</view>
		<view class="addlogo">
			<text>点击更换商户logo</text>
		</view>
		<view class="list" v-for="(item,index) in list" :key="index" @click="amend(item)">
			<view class="list-left">
				<text>{{item.name}}</text>
			</view>
			<view class="list-right">
				<text v-if="item.pris">{{item.pris}}</text>
				<text v-else>{{item.starttime}} - {{item.endtime}}</text>
				<u-icon name="arrow-right" size="28"></u-icon>
			</view>
		</view>
		<view class="btn">
			<button type="primary" @click="path" v-if="ifshow">新增</button>
			<button type="primary" @click="path" v-else>保存</button>
		</view>
	</view>
</template>

<script>
	import {
		operate,
		shoplist
	} from "../../api/merchant/index.js"
	import {
		coordinateToAddress
	} from "../../api/login/login.js"
	export default {
		data() {
			return {
				list: [{
						name: "商户名称",
						pris: ""
					},
					{
						name: "门店位置",
						pris: ""
					},
					{
						name: "详细地址",
						pris: ""
					},
					{
						name: "营业时间",
						starttime: "6:00",
						endtime: "24:00",
					},
					{
						name: "客服电话",
						pris: ""
					},
				],
				ifshow: true,
				latitude: "",
				longitude: "",
				live: "",
				pic: "",
				isok: false,
				nameImg:"",
				arr: {
					id: "", //门店id（修改的时候传）
					merchantId: "", //商户id
					name: "", //门店名称
					period: "", //营业时间
					address: "", //门店地址
					latitude: "", //门店坐标
					tel: "", //门店电话
					logo: "", //
					province: "", //省份
					city: "", //市区
					region: "", //区域
				}
			}
		},
		onShow() {
			this.arr.merchantId = uni.getStorageSync('addmerchantid');
			let obj = uni.getStorageSync('addmerchant');
			if (obj) {
				this.list = obj
			}
		},
		onLoad(options) {
			uni.setStorageSync('addmerchant', this.list);
			let shopid = options.id
			if (shopid) {
				uni.setNavigationBarTitle({
					title: "修改门店"
				})
				this.ifshow = false
				this.arr.id = shopid
				shoplist({
					id: shopid
				}).then(res => {
					console.log(res)
					if (res.code == 0) {
						this.pic = res.data.logo
						this.arr.province = res.province
						this.arr.city = res.city
						this.arr.region = res.region
						this.list[0].pris = res.data.name
						this.list[1].pris = res.data.province_name + '·' + res.data.city_name + '·' + res.data
							.region_name
						this.list[2].pris = res.data.address
						this.list[3].starttime = res.data.starttime
						this.list[3].endtime = res.data.endtime
						this.list[4].pris = res.data.csh
					}
				})
			}
		},
		methods: {
			//更换商户logo
			loadimg() {
				let _this = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: "compressed", //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						_this.pic = res.tempFilePaths[0]
						_this.nameImg = Math.random().toFixed(5) + res.tempFiles[0].name
						uni.uploadFile({
							url: 'https://alicloud-bytedance-video.oss-cn-beijing.aliyuncs.com', //阿里云上传地址
							filePath: _this.pic,
							name: 'file', //必须填file 
							formData: {
								key: _this.nameImg,
								accessKeySecret: "dVhyFXYmeP9snXcXhOrvuXsdQbgvs3",
								accessKeyId: "LTAI4G2XZ3sCfQ5H3BT16qDR",
								success_action_status: "200", //让服务端返回200,不然，默认会返回204 
							},
							complete: (res) => {
								console.log(res, "1111111")
								let urlAl =
									'https://alicloud-bytedance-video.oss-cn-beijing.aliyuncs.com' +
									'/' + _this.nameImg
								// Math.random(urlAl)
								console.log(urlAl)
								_this.pic = urlAl
							},

						})
					}
				});
			},
			// 跳转修改详情页面
			amend(el) {
				let _this = this
				if (el.name === "门店位置") {
					uni.chooseLocation({
						success: function(res) {

							console.log('位置名称：' + res.name);
							console.log('详细地址：' + res.address);
							console.log('纬度：' + res.latitude);
							console.log('经度：' + res.longitude);
							_this.list[2].pris = res.name
							console.log(res.longitude + ',' + res.longitude)
							_this.live = res.name
							_this.arr.latitude = res.longitude + ',' + res.longitude
							coordinateToAddress({
								coordinate: res.longitude + ',' + res.latitude
							}).then(res => {
								if (res.code === 0) {
									_this.arr.province = res.data.province.id
									_this.arr.city = res.data.city.id
									_this.arr.region = res.data.district.id
									_this.list[1].pris = res.data.province.name + "·" + res.data.city
										.name + "·" + res.data.district.name
									_this.list[2].pris = _this.live
								}
							})
						}
					});
				} else {
					let that = this;
					uni.setStorageSync('addmerchant', that.list);
					uni.navigateTo({
						url: `/pages/merchant/addmsg?id=${el.name}`
					})
				}
			},
			path() { //新增跳转
				this.arr.name = this.list[0].pris
				this.arr.address = this.list[2].pris
				this.arr.period = this.list[3].starttime + "-" + this.list[3].endtime
				this.arr.tel = this.list[4].pris
				this.arr.logo = this.pic
				let unm = this.list.forEach(el => {
					if (el.pris !== "" || el.starttime !== "") {
						this.isok = true
					} else {
						false
					}
				})
				if (this.isok) {
					operate({
						...this.arr
					}).then(res => {
						console.log(res)
						if (res.code === 0) {
							uni.redirectTo({
								url: '/pages/merchant/switchover'
							});
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cunten {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: 100%;
		padding: 0 30rpx;
		background-color: #FFFFFF;
		overflow: hidden;
	}

	.lodin {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 180rpx;
		height: 180rpx;
		margin: 80rpx auto;
		margin-bottom: 10rpx;
		background-color: #c1c1c1;
		border-radius: 50%;

		.photo {
			position: absolute;
			width: 180rpx;
			height: 180rpx;
			border-radius: 50%;
		}
	}

	.addlogo {
		margin-bottom: 80rpx;
		font-size: 30rpx;
		line-height: 42rpx;
	}

	.list {
		display: flex;
		justify-content: space-between;
		width: 100%;
		margin-bottom: 60rpx;

		.list-left {
			font-size: 34rpx;
			font-weight: bold;
		}
	}

	.btn {
		position: fixed;
		bottom: 80rpx;
		left: 75rpx;
		width: 600rpx;
		height: 100rpx;
		border-radius: 54rpx;

		button {
			border-radius: 54rpx;
		}
	}
</style>
